<template>
         <!--2020年度员工入职与离职数据统计  -->
  <div >
    <div>
      <div class="header">
        2020年度员工入职与离职数据统计

      </div>
      <div>
        <div id="back5" ></div>
      </div>

    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from 'vuex'
export default {
  name: "Moon",
  data(){
    return{
       joinJob:[ ],
      outJob:[ ],
    }
  },
  computed:{
    ...mapState(['setjoinJob','setoutJob'])
  },

  methods:{
    //回去数据
    getDataM(){
      axios({
        url: 'http://132.232.110.185/personnelManagement/dataStatistics/employeeMonthlyStatistics',
        method: 'get',

              }).then((response) => {

        this.$store.dispatch('setjoinJob',response.data.data.joinJob)
        this.$store.dispatch('setoutJob',response.data.data.outJob)
      })
    },
    getEchant(){
      const myChart = this.$echarts.init(document.getElementById("back5"))//引入到盒子
      const option = {
        title: {
          text: '2020年度员工入职与离职数据统计',
          subtext: '数据时时更新中'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入职', '离职']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '入职',
            type: 'bar',
            data: this.setjoinJob,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            }
          },
          {
            name: '离职',
            type: 'bar',
            data: this.setoutJob,
            markPoint: {
              data: [
                {name: 'Max', value: 182.2, xAxis: 7, yAxis: 183},
                {name: 'Min', value: 2.3, xAxis: 11, yAxis: 3}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },


mounted() {
    this.getEchant()
  this.getDataM()
}


}
</script>

<style scoped>

.header{
  width: 100%;
  height: 74px;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  padding-left:12px ;
  line-height: 74px;
  font-size: 18px;
}
#back5{
  width: 100%;
  text-align: center;
  height:700px;
  line-height: 700px;
  margin:22px auto 0;

}

</style>


